<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style>
            /* #data{
            color:red;
        } */
        </style>
    </head>

    <body>
        <label>考号</label>
        <p>
            <input type="text" id="kh1" />
            <input type="button" value="查询" />
        </p>
        <p><br /></p>
        <table width="200" border="1">
            <tr>
                <td>状况</td>
                <td>成绩</td>
            </tr>
            <tr>
                <td id="zk1">&nbsp;</td>
                <td id="cj1">&nbsp;</td>
            </tr>
        </table>
        <p>&nbsp;</p>
        <div id="data">
            <label>001</label><label>92</label><br />
            <label>002</label><label>56</label><br />
            <label>003</label><label>63</label><br />
            <label>004</label><label>87</label><br />
            <label>005</label><label>65</label><br />
            <label>006</label><label>57</label><br />
            <label>007</label><label>89</label><br />
            <label>008</label><label>48</label><br />
            <label>009</label><label>77</label><br />
            <label>010</label><label>66</label><br />
        </div>
        <script src="../js/jquery-1.12.4.min.js"></script>
        <script>
            $("[value=查询]").click(function () {
                // let value = $("#kh1").val();
                // let labels = $("#data>label:even");
                // labels.each(function(index,ele){
                //     if ($(this).text() == value) {
                //         let score = $(this).next().text();
                //         let level = "";
                //         switch (parseInt(score / 10)) {
                //             case 9:
                //                 level = "优秀";
                //                 break;
                //             case 8:
                //                 level = "良好";
                //                 break;
                //             case 7:
                //                 level = "中等";
                //                 break;
                //             case 6:
                //                 level = "及格";
                //                 break;
                //             default:
                //                 level = "不及格";
                //         }
                //         $("#zk1").html(level);
                //         $("#cj1").html(score);
                //     }
                // });

                let score = $(`#data>label:contains(${$("#kh1").val()})`)
                    .next()
                    .text();
                let level = "";
                switch (parseInt(score / 10)) {
                    case 9:
                        level = "优秀";
                        break;
                    case 8:
                        level = "良好";
                        break;
                    case 7:
                        level = "中等";
                        break;
                    case 6:
                        level = "及格";
                        break;
                    default:
                        level = "不及格";
                }
                $("#zk1").html(level);
                $("#cj1").html(score);
            });
        </script>
    </body>
</html>
